<template>
  <el-card class="content-card">
    <div class="el-descriptions__header">
      <div class="el-descriptions__title">{{ settler ? '结算人信息' : '法人信息' }}</div>
    </div>

    <el-form ref="formRef" :disabled="readonly" :model="model" :rules="formRules" label-width="120px">
      <el-form-item label="身份证头像面：" prop="face_idcard">
        <UploadImage v-model="model.face_idcard" :disabled="readonly" :show-delete="true" :show-tip="false" @change="handleUploadCertificate('face')"/>
      </el-form-item>
      <el-form-item label="身份证国徽面：" prop="back_idcard">
        <UploadImage v-model="model.back_idcard" :disabled="readonly" :show-delete="true" :show-tip="false" @change="handleUploadCertificate('back')"/>
      </el-form-item>
      <el-form-item v-if="settler" label="清算授权书：" prop="authorization">
        <UploadImage v-model="model.authorization" :disabled="readonly" :show-delete="true" :show-tip="false" custom-tip="提示：非法人结算请上传授权函"/>
      </el-form-item>
      <el-form-item v-if="!settler" :label="settler ? '结算人姓名' : '法人姓名：'" prop="user_name">
        <el-input v-model="model.user_name" :placeholder="settler ? '结算人姓名' : '法人姓名'" readonly/>
      </el-form-item>
      <el-form-item label="结算人身份证号：" prop="idcard_num">
        <el-input v-model="model.idcard_num" placeholder="身份证号" readonly/>
      </el-form-item>
      <el-form-item label="结算人手机号：" prop="phone">
        <el-input v-model="model.phone" placeholder="输入结算人手机号"/>
      </el-form-item>
      <el-form-item label="证件地址：" prop="address">
        <el-input v-model="model.address" placeholder="证件地址" readonly/>
      </el-form-item>
      <el-form-item label="发放日期：" prop="start_date">
        <el-input v-model="model.start_date" placeholder="身份证发放日期" readonly/>
      </el-form-item>
      <el-form-item label="有效日期：" prop="end_date">
        <el-input v-model="model.end_date" placeholder="身份证有效日期" readonly/>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElLoading, FormInstance, FormRules } from 'element-plus';
import { UploadImage } from '@/components/upload';
import { ocrRecognize } from '@/api/api-common.ts';
import {SettlerData} from '@/api/common.ts';

const model = defineModel<SettlerData>({required: true});
console.log(model.value)
const props = defineProps({
  readonly: {
    type: Boolean,
    default: false
  },
  settler: {
    type: Boolean,
    default: false
  },
});

const autoRecognize = ref(true);
const defaultForm: SettlerData = <SettlerData>{};
const formRef = ref<FormInstance>();
const formRules = reactive<FormRules>({
  face_idcard: [{required: true, message: '请上传身份证头像面', trigger: 'blur'}],
  back_idcard: [{required: true, message: '请上传身份证国徽面', trigger: 'blur'}],
  authorize_url:[{required: true, message: '请上传结算授权函', trigger: 'blur'}],
  hold_idcard:[{required: true, message: '请上传手持身份证', trigger: 'blur'}],
  phone:[{required: true, message: '手机号不能为空', trigger: 'blur'}]
});

/** 表单重置 */
const formReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
};

/** 表单验证 */
const formValidate = () => {
  if (!formRef.value) return
  return formRef.value.validate()
};

/** 对外提供方法 */
defineExpose({
  formReset,
  formValidate,
});

/** 处理证件照上传完成 */
const handleUploadCertificate = async (face: string) => {
  let val = face=='face' ? model.value.face_idcard : model.value.back_idcard;
  if (val) {
    // 调用接口进行识别
    const loading = ElLoading.service({
      lock: true,
      text: '正在识别中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    try {
      let params = {type: 'idcard', url: val, side: face};
      const {body} = await ocrRecognize(params,{action:'ocr'});
      // let type = data.type;
      let typeData = body;
      if (typeData) {
        if (face=='face') {

          model.value.user_name=typeData.name
          model.value.idcard_num = typeData.num;
          model.value.address = typeData.address;
        } else {
          model.value.start_date = typeData.start_date;
          model.value.end_date = typeData.end_date;
        }
      }
    } finally {
      loading.close();
    }
  } else {
    if (face=='face') {

      model.value.user_name='';
      model.value.idcard_num = '';
      model.value.address = '';
      model.value.address = '';
    } else {
      model.value.start_date = '';
      model.value.end_date = '';
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
